<template>
  <div class="simple-good-detail">
    <!-- 头部：返回按钮 + 商品名称 -->
    <div class="page-header">
      <el-button
          icon="el-icon-arrow-left"
          size="small"
          type="default"
          @click="handleBack"
      >
        返回我的商品
      </el-button>
      <h2 class="good-title">{{ productVo?.name || '商品详情' }}</h2>
    </div>

    <!-- 加载状态 -->
    <el-skeleton
        v-if="loading"
        :count="3"
        :rows="5"
        style="margin-top: 20px;"
    ></el-skeleton>

    <!-- 商品不存在提示 -->
    <el-empty
        v-else-if="!productVo"
        description="商品不存在或已下架"
        image-size="120"
        style="margin-top: 40px;"
    >
      <el-button type="primary" @click="handleBack">返回我的商品</el-button>
    </el-empty>

    <!-- 核心内容：商品基础信息 + 所有图片 -->
    <div v-else class="detail-content">
      <!-- 1. 商品基础信息（极简版） -->
      <el-card shadow="hover" style="margin-bottom: 20px;">
        <div class="base-info">
          <div class="info-item">
            <span class="label">商品价格：</span>
            <span class="value">¥{{ productVo.price.toFixed(2) }}</span>
          </div>
          <div class="info-item">
            <span class="label">商品分类：</span>
            <span class="value">{{ productVo.categoryName || '未分类' }}</span>
          </div>
          <div class="info-item">
            <span class="label">发布时间：</span>
            <span class="value">{{ productVo.createdAt }}</span>
          </div>
          <div class="info-item">
            <span class="label">图片数量：</span>
            <span class="value">{{ productVo.images.length }} 张</span>
          </div>
        </div>
      </el-card>

      <!-- 2. 商品所有图片展示（核心模块） -->
      <el-card shadow="hover">
        <template #header>
          <span class="card-header-title">商品图片（点击图片可预览）</span>
        </template>

        <!-- 图片网格布局：自适应列数 -->
        <div class="image-grid">
          <div
              v-for="(image, index) in productVo.images"
              :key="index"
              class="image-item"
              @click="openImagePreview(index)"
          >
            <el-image
                :initial-index="index"
                :preview-src-list="allImageUrls"
                :src="image.imageUrl"
                fit="cover"
                style="width: 100%; height: 100%;"
            >
              <!-- 图片加载失败占位 -->
              <template #error>
                <div class="image-placeholder">
                  <el-icon size="32">
                    <PictureFilled/>
                  </el-icon>
                  <p>图片加载失败</p>
                </div>
              </template>
            </el-image>
            <!-- 图片序号 -->
            <div class="image-index">{{ index + 1 }}</div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import {computed, onMounted, ref} from 'vue';
import {ElButton, ElCard, ElEmpty, ElIcon, ElImage, ElMessage, ElSkeleton} from 'element-plus';
import {PictureFilled} from '@element-plus/icons-vue';
import {useRoute, useRouter} from 'vue-router';
import http from "@/request/Http.js"; // 复用日期格式化工具

// 路由实例
const router = useRouter();
const route = useRoute();

// 状态管理
const loading = ref(true);
const productVo = ref(null); // 商品数据（包含所有图片）

// 计算属性：提取所有图片URL（用于预览）
const allImageUrls = computed(() => {
  return productVo.value?.images.map(img => img.imageUrl) || [];
});

// 页面挂载时加载商品数据
onMounted(() => {
  const goodsId = route.query.id;
  if (!goodsId) {
    ElMessage.error('商品ID不存在');
    router.push('/my-goods');
    return;
  }
  fetchGoodsData(goodsId);
});

// 加载商品详情（调用现有接口 /api/product/{id}）
const fetchGoodsData = async (goodsId) => {
  loading.value = true;
  try {
    const response = await http.get(`//product/${goodsId}`, {
      headers: {
        'Authorization': localStorage.getItem('token') // 携带登录Token
      }
    });

    if (response.code === 200) {
      productVo.value = response.data;
      // 自动更新浏览量（调用现有接口，不影响主功能）
      await updateViewCount(goodsId);
    } else {
      ElMessage.error(response.msg || '获取商品信息失败');
      productVo.value = null;
    }
  } catch (error) {
    ElMessage.error('网络错误，无法加载商品图片');
    productVo.value = null;
    console.error(error);
  } finally {
    loading.value = false;
  }
};

// 更新商品浏览量（调用现有接口）
const updateViewCount = async (goodsId) => {
  try {
    await http.post(`/product/increaseViewCount/${goodsId}`, {}, {
      headers: {'Authorization': localStorage.getItem('token')}
    });
  } catch (error) {
    console.warn('浏览量更新失败，不影响图片展示', error);
  }
};

// 打开图片预览（饿了么ElImage自带预览功能，无需额外弹窗）
const openImagePreview = (index) => {
  // ElImage已通过preview-src-list和initial-index实现预览，点击图片自动触发
};

// 返回我的商品列表
const handleBack = () => {
  router.push('/my-goods');
};
</script>

<style scoped>
.simple-good-detail {
  padding: 20px;
  background-color: #fff;
  min-height: calc(100vh - 64px);
}

/* 页面头部样式 */
.page-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.good-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  flex: 1;
}

/* 基础信息样式 */
.base-info {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 10px 0;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.label {
  color: #666;
}

.value {
  color: #333;
  font-weight: 500;
}

/* 图片网格布局（自适应列数） */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  padding: 10px 0;
}

.image-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 1/1; /* 保持图片正方形比例 */
  border: 1px solid #f0f0f0;
  transition: border-color 0.3s;
}

.image-item:hover {
  border-color: #409eff;
}

/* 图片序号（左下角） */
.image-index {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}

/* 图片加载失败占位 */
.image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fafafa;
  color: #999;
}

.image-placeholder p {
  margin-top: 8px;
  font-size: 12px;
}

/* 卡片头部标题 */
.card-header-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}
</style>